<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
    	<link rel="stylesheet" href="css/jiazai.css">
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/authen-tication.css"/>
		<link rel="stylesheet" type="text/css" href="css/authen-new.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<title>实名认证</title>
		<style type="text/css">
			.hea-con {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            box-sizing: border-box;
            padding: 10px 20px;
            font-size: 20px;
            color: white;
            background: #2a2c35;
            z-index: 100;
        }
		</style>
	</head>
	<body style="background: #2a2c35;">
		<div id="app">
			 <!-- 加载中动画 -->
	        <div id='jiazai-ani' v-if='jiazai'>
	            <div class="arc"></div>
	            <h1><span>LOADING</span></h1>
	        </div>
	        <!-- 加载中动画 -->
			<div class='hea-con dis-spa'>
	            <img @click='_close()' src="./img/left.svg" width="25px" height="25px">
	            <span>实名认证</span>
	            <span style='opacity: 0;'>1</span>
	        </div>
			<div class="box" style="margin-top: 50px;">
				<div class="ContBox" v-if="tap==1">
					<p class="title">填写身份证</p>
					<ul class="text">
						<li>1.确保名称证件信息为本人所有；</li>
						<li>2.请填写正确的身份信息。</li>
					</ul>
					<div class="cont-input">
						<span class="name">真实姓名</span>
						<input type="text" placeholder="请输入真实姓名" v-model="name" />
					</div>
					<div class="cont-input">
						<span class="name">身份证号</span>
						<input type="text" placeholder="请输入18位身份证号" maxlength="18" v-model="userID" />
					</div>
					<div class="btn-content">
						<button @tap="judgeMethod1" >下一步</button>
					</div>
				</div>
				<transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
					<div class="ContBox" v-if="tap==2">
						<p class="title">拍摄并上传身份证照</p>
						<ul class="text">
							<li>1.大陆公民持有的本人有效二代身份证；</li>
							<li>2.需上传身份证正、反面照；</li>
							<li>3.拍摄时确保身份证<font class="Sblue sp-font">边框完整、字体清晰、亮度均匀</font></li>
						</ul>
						<div class="Img-box Img-box1">
							<div class="cont-box" @click="justBack='just';imgUp();">
								<div class="dis-cen cont-Img">
									<img :src="ImgAddress1" id='card1' style="width: 80%;height: auto;"/>
									<!--<input type="file" class="hide" id="before" @change="beforeAddImg()"/>--> 
								</div>
								<div class="btn-content">拍摄正面</div>
							</div>
							<div class="cont-box" @click="justBack='back';imgUp()">
								<div class="dis-cen cont-Img">
									<img :src="ImgAddress2" id='card2' style="width: 80%;height: auto;"/>
									<!--<input type="file" id="after" name='a' class="hide"  @change="afterAddImg()"  />-->	
								</div>
								<div class="btn-content">拍摄反面</div>
							</div>
						</div>
						<div class="btn-content">
							<button @tap="judgeMethod2()">下一步</button>
						</div>
					</div>
				</transition>	
				<transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
					<div class="ContBox" v-if="tap==3">
						<p class="title">拍摄并上传自拍照</p>
						<ul class="text">
							<li>1.请确保照片的内容完整并清晰可见，仅支持jpg，图片大小小于5M</li>
							<li>2.请上传彩色图像。</li>
						</ul>
						<div class="Img-box Img-box2">
							<div class="cont-box" @click="justBack='shouchi';imgUp()">
								<div class="dis-cen cont-Img" style="padding: 0px;">
									<img :src="ImgAddress3"  style="width: 100%;height: auto;" id='card3'/>
									<!--<input type="file" class="hide" id='hand' @change="handAddImg()" />-->
								</div>
								<div class="btn-content">上传自拍照片</div>
							</div>
						</div>
						<div class="btn-content">
							<button @tap="judgeMethod3()">下一步</button>
						</div>
					</div>
				</transition>
				<transition enter-active-class='animated fadeIn' enter-active-class='animated fadeOut'>
					<div class="ContBox" v-if="tap==4">
						<p class="title">审核中....</p>
						<ul class="text">
							<li>1.确保身份信息填写正确；</li>
							<li>2.审核在24小时内完成，请耐心等待；</li>
							<li>3.审核流程：<span class="Sblue">提交>系统审核>人工加密>审核通过。</span></li>
						</ul>
						<div class="cont-input">
							<span class="name">真实姓名</span>
							<p v-text="name">用户名</p>
						</div>
						<div class="cont-input">
							<span class="name">身份证号</span>
							<p v-text="userID">500382********1499</p>
						</div>
						<div class="dis-spa" style="margin-top: 30px;">
							<p style="margin-right:20px ;flex: 1 1 0;width: 100%;">
								<img :src="imgJust" style="width: 100%;height: auto;"/>
							</p>
							<p style="flex: 1 1 0;width: 100%;">								
								<img :src="imgBack" style="width: 100%;height: auto;"/>
							</p>
						</div>
						<div class="dis-spa" style="margin-top: 30px;">
							<p style="margin-right:20px ;flex: 1 1 0;width: 100%;">
								<img :src="hold" style="width: 100%;height: auto;"/>
							</p>
							<p style="flex: 1 1 0;width: 100%;opacity: 0;">								
								<img :src="imgBack" style="width: 100%;height: auto;"/>
							</p>
						</div>
						<div v-if='imgJust' id="dis-cen" style="padding: 18px;margin-top: 30px;background-color: #4395ff;color: white;font-size: 15px;text-align:center;border-radius: 40px;" @click="tap=2;">
							重传认证信息
						</div>
					</div>
				</transition>
				<div class="ContBox" v-if="tap==5">
					<p class="title">审核已通过</p>
					<ul class="text">
						<li>1.通过系统认证的实名用户，无需再次认证；</li>
						<li>2.U比钱包不会泄露任何用户信息。</li>
					</ul>
					<div class="cont-input">
						<span class="name">真实姓名</span>
						<p v-text='name'>蒋蒋</p>
					</div>
					<div class="cont-input">
						<span class="name">身份证号</span>
						<p v-text='userID'>500382********1499</p>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//审核中
	var audit=function(json){
		var data=JSON.parse(json);
		app.$data.name=data.realname;
		app.$data.userID=data.number;
		app.$data.imgJust=data.positive;
		app.$data.imgBack=data.opposite;
		app.$data.hold=data.hold;
		console.log('正+'+data.positive);
		console.log('反+'+data.opposite);
		console.log('手持+'+data.hold);
		app.$data.tap=4;
	};
	//审核完成
	var yes=function(json){
		var data=JSON.parse(json);
		app.$data.name=data.realname;
		app.$data.userID=data.number;
		app.$data.tap=5;
	};
	var app=new Vue({
		el:"#app",
		data:{	
			jiazai:false,
			tap:1,
			name:"",//姓名
			userID:"",//身份证
			ImgAddress1:"img/card1.jpg",
			ImgAddress2:"img/card2.jpg",
			ImgAddress3:"img/card3.jpg",
			//审核中的正
			imgJust:'',
			//审核中的反
			imgBack:'',
			//手持照
			hold:'',
			//定时器
			time:null,
			//傳圖片的返回  有值说明已经返回了
			url:{
				card1:'',
				card2:'',
				card3:''
			},
			//是正还是反  just:正  back:反  shou:手持
			justBack:'just'
		},
		methods: {
			//相册相机选择
			imgUp:function(){
					var This=this;
					plus.nativeUI.actionSheet({cancel:"取消",buttons:[
						{title:"拍照"},
						{title:"从相册中选择"}
					]}, function(e){//1 是拍照  2 从相册中选择
						switch(e.index){
							case 1:This.clickCamera();break;
							case 2:This.clickGallery();break;
						}
					});
			},
			//选择照片
			clickGallery:function() {
				var This=this;
				plus.gallery.pick(function(path) {
		 			if(This.justBack=='just'){
		 				//在传正面照
		 				This.beforeAddImg(path);
		 			}else if(This.justBack=='back'){
		 				//在传反面照
		 				This.afterAddImg(path);
		 			}else{
		 				//在传手持照
		 				This.shouchi(path);
		 			}
				}, function(err) {});
			},
			//拍照
			clickCamera:function() {
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				var This=this;
				cmr.captureImage(function(path) { 
					plus.io.resolveLocalFileSystemURL(path, function(entry) {
						var localUrl = entry.toLocalURL();
						if(This.justBack=='just'){
			 				//在传正面照
			 				This.beforeAddImg(localUrl);
			 			}else if(This.justBack=='back'){
			 				//在传反面照
			 				This.afterAddImg(localUrl);
			 			}else{
			 				//在传手持照
		 					This.shouchi(localUrl);
			 			}
					});
				}, function(err) {
					console.error("拍照失败：" + err.message);
				}, {
					index: 1
				});
			},
			judgeMethod1:function(){//判断1
				var self=this;
				if(!this.name){
					_toast('请输入有效的姓名');
					return;
				}
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
				// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
				if(!reg.test(self.userID)){
					_toast("身份证输入不合法");
					return;
				};
				self.tap=2;
			},
			judgeMethod2:function(){//判断2
				var self=this;
				if(self.ImgAddress1=="img/card1.jpg"){
					mui.toast("请选择身份证的正面上传");  
					return;
				};
				if(self.ImgAddress2=="img/card2.jpg"){
					mui.toast("请选择身份证的反面上传");  
					return;
				};
				this.tap=3;
			},
			judgeMethod3:function(){//判断2
				var self=this;
				if(self.ImgAddress3=="img/card3.jpg"){
					mui.toast("请选择手持身份证的照片上传");  
					return;
				};
				if(this.imgJust){
					this.alignUp();
				}else{					
					this.authen();
				}
			},
			beforeAddImg:function(path){//正面
				var self=this;
//				var Obj = document.getElementById("before");
//				var imgStr = window.URL.createObjectURL(Obj.files[0]);


				self.ImgAddress1=path;
				console.log(path)

				setTimeout(function(){
					var base=self.base64(document.getElementById('card1'),function(ba){
						self.upImg({base64:ba,off:'card1'});
					});
				},300);
			},
			afterAddImg:function(path){//反面
//				var self=this;
//				var Obj = document.getElementById("after");
//				var imgStr = window.URL.createObjectURL(Obj.files[0]);
//				self.ImgAddress2=imgStr;
//				setTimeout(function(){
//					var base=self.base64(document.getElementById('card2'),function(ba){
//						self.upImg({base64:ba,off:'card2'});
//					});
//				},200);
				var self=this;
				self.ImgAddress2=path;
				setTimeout(function(){
					var base=self.base64(document.getElementById('card2'),function(ba){
						self.upImg({base64:ba,off:'card2'});
					});
				},300);
			},
			//手持照
			shouchi:function(path){
				var self=this;
				self.ImgAddress3=path;
				setTimeout(function(){
					var base=self.base64(document.getElementById('card3'),function(ba){
						self.upImg({base64:ba,off:'card3'});
					});
				},300);
			},
			handAddImg:function(){//手持
				var self=this;
				var Obj = document.getElementById("hand");
				var imgStr = window.URL.createObjectURL(Obj.files[0]);
				self.ImgAddress3=imgStr;
			},
			//返回base64
			base64:function(img,cal) { 
	             var width = img.width,height = img.height;
	             //压缩出来的宽度是400  高度是按照比例来自适应的
				 var scale = width / height;
				 var width1 = 600;
	             var height1 = parseInt(width1 / scale);
	             var canvas = document.createElement("canvas");   
	             canvas.width = width1; /*设置新的图片的宽度*/  
	             canvas.height = height1; /*设置新的图片的长度*/  
	             var ctx = canvas.getContext("2d");  
	             ctx.drawImage(img, 0, 0, width1, height1); 
	             var dataURL = canvas.toDataURL("image/jpeg", 1);  
	             cal(dataURL);
	       },
	       //传图片
	       upImg:function(json){
	       		var This=this;
	       		var user = JSON.parse(localStorage.getItem('cc_user'));
	       		_post(ID_CARD_IMG, {
	       			userid:user.userid,
	       			session:user.session,
	       			base_img:json.base64
	       		}, function(data) {
	       			if(data.status==1){
	       				This.url[json.off]=data.back;
	       			}else{
	       				switch(json.off){
	       					case 'card1':
	       						This.ImgAddress1='img/card1.jpg';
	       						break;
	       					case 'card2':
	       						This.ImgAddress2='img/card2.jpg';
	       						break;
	       					case 'card3':
	       						This.ImgAddress3='img/card3.jpg';
	       						break;
	       				}
	       				_toast(data.msg);
	       			}
                });
	       },
	       //提交实名信息
	       authen:function(){
		       	var This=this;
		       	this.jiazai=true;
		       	if(!(this.url.card1&&this.url.card2&&this.url.card3)){
		       		if(!this.time){
		       			this.time=setInterval(function(){
		       				This.authen();
		       			},200);
		       		}
		       		return;
		       	}
		       	if(this.time){
		       		clearInterval(this.time);
		       	}
		       	var user = JSON.parse(localStorage.getItem('cc_user'));
	       		_post(AUTHER_SUB, {
	       			userid:user.userid,
	       			session:user.session,
                    realname:this.name,
                    number:this.userID,
                    positive:this.url.card1,
                    opposite:this.url.card2,
                    hold:this.url.card3
                }, function(data) {
                	if(data.status==1){
                		This.tap=4;
                		plus.webview.getWebviewById('index').evalJS("refreMy()");
                	}else{
                		_toast(data.msg);
                	}
                	This.jiazai=false;
                });
	       },
	       //重新提交身份证图片
	       alignUp:function(){
	       		var This=this;
		       	this.jiazai=true;
		       	if(!(this.url.card1&&this.url.card2&&this.url.card3)){
		       		if(!this.time){
		       			this.time=setInterval(function(){
		       				This.authen();
		       			},200);
		       		}
		       		return;
		       	}
		       	if(this.time){
		       		clearInterval(this.time);
		       	}
		       	var user = JSON.parse(localStorage.getItem('cc_user'));
	       		_post(AUTHER_SUB2, {
	       			userid:user.userid,
	       			session:user.session,
                    positive:this.url.card1,
                    opposite:this.url.card2,
                    hold:this.url.card3
                }, function(data) {
                	This.jiazai=false;
                	_toast(data.msg);
                	if(data.status==1){
            			setTimeout(function(){
            				_close();
            			},1200);
                	}
                });
	       }
		},	
	});

	function plusReady() {
		
	};
	if(window.plus) {
		plusReady();
	} else {
		document.addEventListener('plusready', plusReady, false);
	};
</script>